在 Vue 3 中，表單綁定和事件處理是開發交互式應用的重要部分。Vue 提供了簡單而強大的工具來處理這些任務，其中最具代表性的是 v-model 指令和事件處理機制。這兩者相結合，能讓開發者輕鬆實現雙向數據綁定和與用戶互動的功能。

表單綁定：v-model

v-model 是 Vue 中實現表單元素雙向數據綁定的核心工具。透過它，我們可以使表單輸入框（如 input、textarea、select）的值自動與 Vue 組件中的數據進行同步，無需手動寫事件來更新數據。v-model 可以綁定的元素包括但不限於文本輸入框、複選框、單選按鈕、下拉選單等。

v-model 的基本使用

我們可以透過簡單的 v-model 指令將表單的輸入綁定到 Vue 組件的數據屬性上。例如：

  <div>
    <input v-model="message" placeholder="輸入訊息">
    <p>您輸入的訊息是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

在這段代碼中，v-model 綁定了 input 的值與 message 這個數據屬性，當用戶在輸入框中輸入文本時，message 的值會自動更新，並在頁面上即時顯示。

處理不同類型的表單元素

除了文本框，v-model 也能夠綁定其他類型的表單元素：

• 複選框（checkbox）： 複選框可以綁定布爾值來表示是否選中。

<template>
  <div>
    <input type="checkbox" v-model="checked"> 是否選中
    <p>狀態：{{ checked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  }
};
</script>

當複選框的狀態改變時，checked 會自動更新為 true 或 false。

• 單選按鈕（radio）： 單選按鈕可以綁定一個變量來反映選中的值。

<template>
  <div>
    <input type="radio" value="Option A" v-model="picked"> 選擇 A
    <input type="radio" value="Option B" v-model="picked"> 選擇 B
    <p>您選擇的是：{{ picked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: ''
    };
  }
};
</script>

當用戶選擇其中一個選項時，picked 會被更新為相應的值。

• 下拉選單（select）： v-model 同樣支持下拉選單的綁定。

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">請選擇一個選項</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>您選擇的是：{{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    };
  }
};
</script>

當用戶從下拉菜單中選擇一個選項後，selected 會更新為對應的值。

v-model 的修飾符

Vue 提供了幾個方便的修飾符來擴展 v-model 的功能：

• .lazy：默認情況下，v-model 綁定的數據會隨著輸入內容即時更新。如果你希望等到用戶離開輸入框後再更新數據，可以使用 .lazy 修飾符。

<input v-model.lazy="message">

• .number：將用戶的輸入自動轉換為數字類型。

<input v-model.number="age" type="number">

• .trim：自動移除用戶輸入的首尾空白字符。

<input v-model.trim="message">

事件處理

除了數據綁定，事件處理也是 Vue 中非常重要的一部分。透過 Vue 的事件處理系統，我們可以輕鬆地處理用戶交互並響應各種事件。

基本事件處理

Vue 使用 v-on 指令來監聽 DOM 事件。v-on 可以簡寫為 @，使代碼更加簡潔。

<template>
  <button @click="handleClick">點擊我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按鈕被點擊了！');
    }
  }
};
</script>

當用戶點擊按鈕時，handleClick 方法會被調用並輸出一條訊息。

傳遞參數

我們可以在事件處理方法中傳遞參數。這可以通過箭頭函數來實現。

<template>
  <button @click="handleClick('參數')">點擊我</button>
</template>

<script>
export default {
  methods: {
    handleClick(param) {
      console.log('按鈕被點擊了，參數是：', param);
    }
  }
};
</script>

在這個例子中，當按鈕被點擊時，handleClick 方法會接收到 '參數' 作為參數，並將其打印到控制台。

事件修飾符

Vue 提供了一些常見的事件修飾符來簡化事件處理。

• .stop：阻止事件冒泡。

<button @click.stop="handleClick">點擊我</button>

• .prevent：阻止默認行為，例如阻止表單提交。

<form @submit.prevent="handleSubmit">...</form>

• .self：僅在事件發生在元素本身而非其子元素上時才觸發。

<div @click.self="handleClick">點擊我</div>

• .once：確保事件只會被觸發一次。

<button @click.once="handleClick">只點擊一次</button>

鍵盤事件

v-on 也能夠用來處理鍵盤事件。Vue 提供了快捷方式來監聽特定的鍵盤按鍵，例如：

<input @keyup.enter="submitForm">

這個例子中，只有當用戶按下回車鍵時，submitForm 方法才會被調用。其他常見的鍵盤快捷方式還包括 .tab、.delete、.esc 等。

結論

v-model 和事件處理是 Vue 3 中構建交互式應用的核心組件。通過 v-model，開發者可以輕鬆地實現表單的雙向數據綁定，避免繁瑣的手動更新。而透過 Vue 的事件處理系統，我們可以精確地響應用戶的操作，從而打造出流暢的用戶體驗。掌握這些工具能大大提升開發效率，並使得程式碼更加簡潔和易於維護。